<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id=" app">
  <p v-text="msg"></p>
    <p v-html="msg"></p>
    <p>{{ msg }}</p>
    <p :class="cN"></p>
    <input type="button" @click="change()" value="Click Me">
</div>
<script>
  Vue.createApp({

    data(){
    return {
      // data
      msg: '<h1>Hello World!</h1>'
      , cN: 'red'
    }

    }
    , methods: {
    //data里面的数据和methods里的函数都会挂载到app这个(vue)对象里面
      change(){
        this.cN = 'blue'
      }
    }
  }).mount('#app')
</script>
</body>
</html>